The Google Maps Autocomplete Place Search Box, often simply called the "search bar" in Google Maps, is a powerful tool that helps you quickly and easily find the places you're looking for. It acts as a dynamic search engine within the map itself, offering suggestions as you type.
In this tutorial, we will learn how to make Google Maps autocomplete place search suggestions in the Flutter app. After selecting the suggestion from search box, we will move the camera position to the selected location on Google map.
Before starting this tutorial, you have to integrate google Maps correctly on your project:
Now, add these packages in your project by adding following lines in pubspec.yaml file:
dependencies:
flutter:
sdk: flutter
flutter_google_places_hoc081098: ^1.0.0-nullsafety.5
google_api_headers: ^1.1.1
google_maps_webservice: ^0.0.20-nullsafety.5
google_maps_flutter: ^2.1.1
Activate these APIs on Google Map Console:
Now see the example below where we have implemented a completely autocomplete search suggestion box on Google Map to search places in Flutter App.
import 'package:flutter/material.dart';
import 'package:flutter_google_places_hoc081098/flutter_google_places_hoc081098.dart';
import 'package:google_api_headers/google_api_headers.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:google_maps_webservice/places.dart';
void main(){
runApp(MyApp());
}
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Home(),
);
}
}
class Home extends StatefulWidget{
@override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
String googleApikey = "GOOGLE_MAP_API_KAY";
GoogleMapController? mapController; //contrller for Google map
CameraPosition? cameraPosition;
LatLng startLocation = LatLng(27.6602292, 85.308027);
String location = "Search Location";
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Place Search Autocomplete Google Map"),
backgroundColor: Colors.deepPurpleAccent,
),
body: Stack(
children:[
GoogleMap( //Map widget from google_maps_flutter package
zoomGesturesEnabled: true, //enable Zoom in, out on map
initialCameraPosition: CameraPosition( //innital position in map
target: startLocation, //initial position
zoom: 14.0, //initial zoom level
),
mapType: MapType.normal, //map type
onMapCreated: (controller) { //method called when map is created
setState(() {
mapController = controller;
});
},
),
//search autoconplete input
Positioned( //search input bar
top:10,
child: InkWell(
onTap: () async {
var place = await PlacesAutocomplete.show(
context: context,
apiKey: googleApikey,
mode: Mode.overlay,
types: [],
strictbounds: false,
components: [Component(Component.country, 'np')],
//google_map_webservice package
onError: (err){
print(err);
}
);
if(place != null){
setState(() {
location = place.description.toString();
});
//form google_maps_webservice package
final plist = GoogleMapsPlaces(apiKey:googleApikey,
apiHeaders: await GoogleApiHeaders().getHeaders(),
//from google_api_headers package
);
String placeid = place.placeId ?? "0";
final detail = await plist.getDetailsByPlaceId(placeid);
final geometry = detail.result.geometry!;
final lat = geometry.location.lat;
final lang = geometry.location.lng;
var newlatlang = LatLng(lat, lang);
//move map camera to selected place with animation
mapController?.animateCamera(CameraUpdate.newCameraPosition(CameraPosition(target: newlatlang, zoom: 17)));
}
},
child:Padding(
padding: EdgeInsets.all(15),
child: Card(
child: Container(
padding: EdgeInsets.all(0),
width: MediaQuery.of(context).size.width - 40,
child: ListTile(
title:Text(location, style: TextStyle(fontSize: 18),),
trailing: Icon(Icons.search),
dense: true,
)
),
),
)
)
)
]
)
);
}
}
In this way, you can add place search autocomplete on Google map in the Flutter app.